/***
 * 获取更新前的一些DOM信息 比如滚动位置
 * getSnapshotBeforeUpdate
 *
 *
 */
import React, { Component } from 'react'
export default class App extends Component {
  state = {
    arr: ['html', 'css', 'javascript']
  }
  //  更新前获取快照
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // console.log(document.getElementById('myul').clientHeight)
    return document.getElementById('myul').clientHeight
  }
  // snapshot就是生命周期getSnapshotBeforeUpdate return的返回值
  //  组件更新完毕
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot)
  }
  render() {
    // console.log(this.state)
    return (
      <div>
        <ul id="myul">
          {this.state.arr.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <div>
          <button onClick={this.add}>添加</button>
        </div>
      </div>
    )
  }
  add = () => {
    this.setState({ arr: [...this.state.arr, new Date().getTime()] })
  }
}
